﻿// -----------------------------------------------------------------------------
// Application.Data.Map
Application.Data.Map = [
	{id: 1, position: {x: 1, y: 1}},
	{id: 2, position: {x: 1, y: 2}},
	{id: 3, position: {x: 1, y: 3}},
	{id: 4, position: {x: 1, y: 4}},
	{id: 5, position: {x: 1, y: 5}},

	{id: 6, position: {x: 2, y: 1}},
	{id: 7, position: {x: 2, y: 2}},
	{id: 8, position: {x: 2, y: 3}},
	{id: 9, position: {x: 2, y: 4}},
	{id: 10, position: {x: 2, y: 5}},

	{id: 11, position: {x: 3, y: 1}},
	{id: 12, position: {x: 3, y: 2}},
	{id: 13, position: {x: 3, y: 3}},
	{id: 14, position: {x: 3, y: 4}},
	{id: 15, position: {x: 3, y: 5}},

	{id: 16, position: {x: 4, y: 1}},
	{id: 17, position: {x: 4, y: 2}},
	{id: 18, position: {x: 4, y: 3}},
	{id: 19, position: {x: 4, y: 4}},
	{id: 20, position: {x: 4, y: 5}},		

	{id: 21, position: {x: 5, y: 1}},
	{id: 22, position: {x: 5, y: 2}},
	{id: 23, position: {x: 5, y: 3}},
	{id: 24, position: {x: 5, y: 4}},
	{id: 25, position: {x: 5, y: 5}},		

	{id: 26, position: {x: 6, y: 1}},
	{id: 27, position: {x: 6, y: 2}},
	{id: 28, position: {x: 6, y: 3}},
	{id: 29, position: {x: 6, y: 4}},
	{id: 30, position: {x: 6, y: 5}},		

	{id: 31, position: {x: 7, y: 1}},
	{id: 32, position: {x: 7, y: 2}},
	{id: 33, position: {x: 7, y: 3}},
	{id: 34, position: {x: 7, y: 4}},
	{id: 35, position: {x: 7, y: 5}},		

	{id: 36, position: {x: 8, y: 1}},
	{id: 37, position: {x: 8, y: 2}},
	{id: 38, position: {x: 8, y: 3}},
	{id: 39, position: {x: 8, y: 4}},
	{id: 40, position: {x: 8, y: 5}}	
];

// -----------------------------------------------------------------------------
// Application.Models.Map | Application.Models.Tile
Application.Models.Map = Backbone.Model.extend({
	defaults: {
		id:				null,
		name: 		null,
		size:			{
			x:	5,
			y:	2
		}
	}
});

// ---

Application.Models.Tile = Backbone.Model.extend({
	defaults: {
		id: null,
		active: false,
		position:	{
			x:	0,
			y:	0
		}
	},
	
	initialize: function(){
		this.bind('change:active', function() {
			this.trigger('active');
		});

		return this;
	}	
});


// -----------------------------------------------------------------------------
// Application.Collections.Tile
Application.Collections.Tile = Backbone.Collection.extend({
	model: Application.Models.Tile
});


// -----------------------------------------------------------------------------
// Application.Views.Map | Application.Views.Tile
Application.Views.Map = Backbone.View.extend({
	el:	$('#map'),
	template:	_.template($('#view-map').html()),
	events: {
		'mousemove #map-action-layer': 'actionLayerMouseover',
		'mouseout #map-action-layer': 'actionLayerMouseout'
	},
	buffer: {
		tileByPosition: {
			x: 0,
			y: 0
		},
		activeTile : null
	},

	initialize: function(){
		_.bindAll(this, 'render', 'initializeTileCollection');
		
		this
			.initializeTileCollection()
			.render();
			
		// Layer auf die richtige Groesse anpassen
		$(this.el).find('#map-tile-layer').css({
			width: this.getMapScreenSize().x,
			height: this.getMapScreenSize().y
		});
		
		// Layer auf die richtige Groesse anpassen
		$(this.el).find('#map-action-layer').css({
			width: this.getMapScreenSize().x,
			height: this.getMapScreenSize().y
		});		
		
		return this;
	},

	render: function() {
		$(this.el).append(this.template());
		return this;
	},
	
	renderTileCollection: function() {
	
		var tileLayer = $(this.el).find('#map-tile-layer');

		// @todo: spaeter sollten nur die Tiles im X/Y Bereich ausgelesen werden
		_(this.tileCollection.models).each(function(appModelTile) {
			appViewTile = new Application.Views.Tile({
				model: appModelTile
			});
						
			// @todo erst Nodes sammeln und dann append
			tileLayer.append(appViewTile.render().el);
		}, this);		
				
		return this;
	},
	
	initializeTileCollection: function() {
		this.tileCollection = new Application.Collections.Tile(Application.Data.Map);
		return this;
	},
	
	getMapScreenSize: function() {
		return {
			x: (Application.Config.Map.screen.width * Application.Config.Tile.width),
			y: (Application.Config.Map.screen.height * Application.Config.Tile.height)
		};
	},
	
	getTileByPosition: function(position) {
		var x 		= Math.floor(position.x / Application.Config.Tile.width) + 1;
		var y 		= Math.floor(position.y / Application.Config.Tile.height) + 1;
		var tile	= null;
		
		if(x !== this.buffer.tileByPosition.x || y !== this.buffer.tileByPosition.y) {
			this.buffer.tileByPosition.x = x;
			this.buffer.tileByPosition.y = y;
			
			tile = this.tileCollection.find(function(data) {
				if(data.get('position').x === x && data.get('position').y === y) {
					return data;
				}
			});
		}
		
		return tile;
	},
	
	actionLayerMouseover: function(e) {
		if((tile = this.getTileByPosition({x: e.offsetX, y: e.offsetY})) !== null) {
			if(this.buffer.activeTile !== null) {
				this.buffer.activeTile.set('active', false);
			}
			
			this.buffer.activeTile = tile;
			tile.set('active', true);		
		}
	},
	
	actionLayerMouseout: function(e) {
		if(this.buffer.activeTile !== null) {
			this.buffer.activeTile.set('active', false);
			this.buffer.activeTile 				= null;
			this.buffer.tileByPosition.x 	= 0;
			this.buffer.tileByPosition.y 	= 0;
		}
	}	
});

// ---

Application.Views.Tile = Backbone.View.extend({
	template:	_.template($('#view-tile').html()),
	
	_getPositionX: function(x) {
		position = 0;
		position = (x - 1) * Application.Config.Tile.width;

		return position;
	},

	_getPositionY: function(y) {
		position = 0;
		position = (y - 1) * Application.Config.Tile.height;

		return position;
	},

	initialize: function() {
		_.bindAll(this, 'render', 'changeActive');
		this.model.bind('active', this.changeActive);	
		return this;
	},

	render: function() {
		this.setElement(this.template());
		$(this.el).css({
			top: this._getPositionY(this.model.get('position').y),
			left: this._getPositionX(this.model.get('position').x)
		});
		
		return this;
	},
	
	changeActive: function() {
		if(this.model.get('active') === true) {
			$(this.el).addClass('active');
		} else {
			$(this.el).removeClass('active');
		}
	}
});